<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣音乐</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/recet.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

    <!-- 头部区域 -->
    <!-- 头部导航栏 -->
    <div class="Navigation">
        <ul>
            <li>
                <a href="javascript:;">豆瓣</a>
            </li>
            <li>
                <a href="javascript:;">读书</a>
            </li>
            <li>
                <a href="javascript:;">电影</a>
            </li>
            <li>
                <a href="javascript:;">音乐</a>
            </li>
            <li>
                <a href="javascript:;">同城</a>
            </li>
            <li>
                <a href="javascript:;">小组</a>
            </li>
            <li>
                <a href="javascript:;">阅读</a>
            </li>
            <li>
                <a href="javascript:;">FM</a>
            </li>
            <li>
                <a href="javascript:;">时间</a>
            </li>
            <li>
                <a href="javascript:;">豆品</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="JavaScript:;">下载豆瓣客户端</a>
            </li>
            <li>
                <a href="javascript:;">登陆/注册</a>
            </li>
        </ul>
    </div>
    <!-- 头部搜索区域 -->
    <div class="search">
        <!-- 头部版心 -->
        <div class="Main">
            <!-- 豆瓣音乐Logo -->
            <div class="songsLogo">
                <a href="javaScript:;">
                    豆瓣音乐
                </a>
            </div>
            <!-- 搜索框 -->
            <form class="searchinput">
                <input placeholder="唱片名、表演者、条码、ISRC"></input>
                <li>O</li>
            </form>
        </div>
    </div>

    <!-- 导航区域 -->
    <div class="topNav">
        <!-- 版心 -->
        <ul class="Main">
            <li>
                <a href="javascript:;">音乐人</a>
            </li>
            <li>
                <a href="javascript:;">专题</a>
            </li>
            <li>
                <a href="javascript:;">排行榜</a>
            </li>
            <li>
                <a href="javascript:;">分类浏览</a>
            </li>
            <li>
                <a href="javascript:;">乐评</a>
            </li>
            <li>
                <a href="javascript:;">豆瓣FM</a>
            </li>
            <li>
                <a href="javascript:;">歌单</a>
            </li>
            <li>
                <a href="javascript:;">2020年度榜单</a>
            </li>
        </ul>
    </div>

    <!-- 豆瓣音乐表单 -->
    <a class="songLogo" href="javascript:;">
        <img src="http://img3.doubanio.com/dae/accounts/resources/19870c3/music/assets/annual_2019.png" />
    </a>

    <!-- 中间宽度(版心) -->
    <div class="Main">
        <!-- 主体区域 -->
        <div id="left" style="float: left;">
            <!-- 轮播图 -->
            <div class="swiper">
                <img src="./images/banner/banner-2874.jpg" />
            </div>
            <!-- 排行榜 --音乐人-->
            <div class="ranking1">
                <span>
                    <a href="javascript:;">本周流行音乐人</a>
                    <a href="javascript:;">|</a>
                    <a href="javascript:;">上升最快音乐人</a>
                </span>
                <div class="rankingContent">
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                    </div>
                </div>
            </div>
            <!-- 排行版 --新碟榜 -->
            <div class="ranking2">
                <div class="title">
                    <span>新碟榜</span>
                    <ul>
                        <li>最热</li>
                        <li>|</li>
                        <li>华语</li>
                        <li>|</li>
                        <li>欧美</li>
                        <li>|</li>
                        <li>日韩</li>
                        <li>|</li>
                        <li>单曲</li>
                    </ul>
                </div>
                <div class="rankingContent">
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                        <span>评分</span>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                        <span>评分</span>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                        <span>评分</span>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                        <span>评分</span>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                        <span>评分</span>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                        <span>评分</span>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                        <span>评分</span>
                    </div>
                    <div>
                        <img src="./images/banner/banner-2912.jpg">
                        <a>YYY</a>
                        <a>XXX</a>
                        <span>评分</span>
                    </div>
                </div>
            </div>
            <!-- 排行版 --近期热门歌单 -->
            <div class="ranking3">
                <div class="title">
                    <span>近期热门歌单</span>
                    <ul>
                        <li>最热</li>
                        <li>|</li>
                        <li>流行</li>
                        <li>|</li>
                        <li>摇滚</li>
                        <li>|</li>
                        <li>民谣</li>
                        <li>|</li>
                        <li>原生</li>
                    </ul>
                </div>
                <div class="rankingContent">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                </div>
            </div>
        </div>

        <div id="right" style="float: right; height: 3000px;">
            <!-- 加入 -->
            <div class="join">
                <div class="top">
                    <div>
                        <p>47556</p>
                        <span>音乐人</span>
                    </div>
                    <div>
                        <p>2345</p>
                        <span>播客</span>
                    </div>
                    <div>
                        <p>1432</p>
                        <span>厂牌</span>
                    </div>
                </div>
                <div class="bot">
                    <div>我要加入</div>
                </div>
            </div>
            <!-- 音乐人分类 -->
            <div class="songsTypes">
                <span>热门音乐人分类</span>
                <ul>
                    <li>
                        <a href="javascript:;">流行</a>
                    </li>
                    <li>
                        <a href="javascript:;">轻音乐</a>
                    </li>
                    <li>
                        <a href="javascript:;">摇滚</a>
                    </li>
                    <li>
                        <a href="javascript:;">古典</a>
                    </li>
                    <li>
                        <a href="javascript:;">电子</a>
                    </li>
                    <li>
                        <a href="javascript:;">世界音乐</a>
                    </li>
                    <li>
                        <a href="javascript:;">民谣</a>
                    </li>
                    <li>
                        <a href="javascript:;">说唱</a>
                    </li>
                    <li>
                        <a href="javascript:;">爵士</a>
                    </li>
                    <li>
                        <a href="javascript:;">原生</a>
                    </li>
                    <li>
                        <a href="javascript:;">流行</a>
                    </li>
                    <li>
                        <a href="javascript:;">流行</a>
                    </li>
                </ul>
            </div>
            <!-- 本周单曲排行 -->
            <div class="weekRanking">
                <!-- 标题 -->
                <div class="weekRankingTitle">
                    <span>本周单曲榜</span>
                    <button>播放全部</button>
                </div>
                <!-- 分类 -->
                <ul class="classification">
                    <li>最热</li>
                    <li>|</li>
                    <li>摇滚</li>
                    <li>|</li>
                    <li>民谣</li>
                    <li>|</li>
                    <li>流行</li>
                    <li>|</li>
                    <li>电子</li>
                    <li>|</li>
                    <li>说唱</li>
                </ul>
                <div class="playsongs">
                    <ul>
                        <li>
                            <img src="./images/logo.png">
                            <span>classification</span>
                        </li>
                        <li>
                            <img src="./images/logo.png">
                            <span>classification</span>
                        </li>
                        <li>
                            <img src="./images/logo.png">
                            <span>classification</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>